<!--
 * @Descripttion: 
 * @Author: jhw
 * @Date: 2023-05-26 17:17:15
 * @LastEditors: jhw
 * @LastEditTime: 2023-05-26 19:25:56
-->
<template>
  <div>
    <canvas id="myCanvas" width="500" height="500"></canvas>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

const createCanvas = () => {
  const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

  // 设置基本参数
  // const lineWidth = 6; // 线宽
  // const strokeStyle = 'black'; // 线颜色
  // const points = [
  //   { x: 50, y: 100 },
  //   { x: 200, y: 100 },
  //   { x: 125, y: 100 },
  //   { x: 125, y: 50 },
  //   { x: 125, y: 150 },
  // ]; // 绘制点数据

  // // 清空画布
  // ctx.clearRect(0, 0, canvas.width, canvas.height);

  // // 设置绘制参数
  // ctx.lineWidth = lineWidth;
  // ctx.strokeStyle = strokeStyle;
  // ctx.lineCap = 'round';

  // // 开始绘制路径
  // ctx.beginPath();
  // ctx.moveTo(points[0].x, points[0].y);

  // for (let i = 1; i < points.length; i++) {
  //   ctx.lineTo(points[i].x, points[i].y);
  //   ctx.stroke();
  // }
  // // 结束绘制路径
  // ctx.closePath();

  // 设置样式，绘制线条
  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.quadraticCurveTo(100, 0, 150, 50);
  ctx.stroke();
};

onMounted(() => {
  createCanvas();
});
</script>

<style lang="scss" scoped>
#myCanvas {
  border: 1px solid #000;
}
</style>
